<template>
    <div class="authorList">
        <loading loadingStyle="height: 500px;" v-if="!userListInfo"></loading>
        <div v-else>
            <ul class="infoBoxChild clearfix">
                <li v-for="item in userListInfo.items[modeType]" :key="item.id">
                    <router-link :to="{path:toUrl,query:{modeId:item.id}}">
                    <div class="infoImg">
                        <img :src="item.image" alt="">
                        <!-- <div class="clearfix infoTextBox">
                            <div class="infoText">
                                <p class="vipText">{{item.title}}</p>
                                <p class="infoItemId">ID:&nbsp<span>{{item.id}}</span></p>
                            </div>
                        </div> -->
                        <p class="infoItemPrompt">
                        <span class="vipText" :title="item.title">{{item.title}}</span>
                            <button class="collBox" @click.prevent.stop="collection({e:$event,id:item.id,type:modeType})">
                                <i class="coll" :class="{'avtiveColl':isInArray(item.id)}"></i>
                                收藏
                            </button>
                            <button class="downBox" @click.prevent.stop="modeDownload(item.id,item.title)">
                                <i class="downloadStatus"></i>
                                下载
                            </button>
                        </p>
                    </div>
                    </router-link>
                </li>
            </ul>
            <page :pageItem="pageInfo" style="width: 100%;margin-top:30px;" @pageChange="getMsg"></page>
        </div>
        <div v-if="userListInfo&&userListInfo.items[modeType].length==0" class="contentNull">
          
        </div>
    </div>
</template>
<script>
import {mapState,mapMutations,mapGetters,mapActions} from 'vuex';
import loading from '../loading';
import page from '../page'
    export default{
        name : "modeList",
        props: ["length",//渲染的个数
                "toUrl",//要跳转的地址
                "id",//请求回来的信息
                "modeType"//请求信息的类型
                ],
        data(){
            return {
                msg: "模型列表",
                userListInfo:null,
                pageInfo:null,
            }
        },
        computed: {
            ...mapState({//登录的用户信息
                user: state => state.AuthUser
            }),
            mismatchError() {
                return this.bag.has('password:auth') && !this.errors.has('password')
            },
            
            
        },
        methods: {
            ...mapMutations(//mutations中的方法
                ["loginShow","loginClose","loginLoginName","registerLoginName","collection"]
            ),
            getMsg(value){//翻页
                axios.get("/usershow/"+this.$route.query.id+"/"+this.modeType+"/getitems?page="+value)
                .then(response=>{
                    this.userListInfo = response.data.data;
                })
            },
            isInArray(value){
               var arr = null;
                if(!this.user.userInfo){
                    return
                }else{
                    if(this.modeType!="7"){
                        arr = this.user.userInfo.data.datacollects;
                        }else{
                            arr = this.user.userInfo.data.articlecollects;
                        }
                        for(var i = 0; i < arr.length; i++){
                            if(value === arr[i]){
                                return true;
                            }
                        }
                        return false;
                }
                
            },
            modeDownload(id,name){//模型下载
                if(this.$store.state.AuthUser.userInfo){
                    axios({
                        method: 'get',
                        url: '/downdata/'+id,
                        // responseType: 'blob'
                    }).then(response => {
                        // return;
                        if(response.data.status=="1"){
                            /* window.open("http://192.168.1.162/api/downurl/"+this.user.userInfo.data.user_id+"/"+this.modeType+"/"+id+"/"+response.data.passkey,"_blank"); */ 
                             window.location.href = this.user.userInfo.data.app_url+"api/downurl/"+this.user.userInfo.data.user_id+"/"+this.modeType+"/"+id+"/"+response.data.passkey;
                        }else if(response.data.status=="0"){
                            this.errorWarning('交易币不足，请充值后再进行下载...');
                        }
                        // return;
                        // var blob = new Blob([response.data],{type:response.headers['content-type']});
                        // this.download(response.data,name)
                    }).catch((error) => {
                        this.errorWarning("下载失败");
                    }) 
                }else{
                    this.loginShow();
                } 
            },
        },
        created() {
            axios.get("/usershow/"+this.$route.query.id+"/"+this.modeType+"/getitems").then(response=>{
                this.userListInfo = response.data.data;
                this.pageInfo = response.data;
                this.$emit("parentInfo",response)
            })
        },
        components:{
            loading,
            page
        }
    }
</script>
<style>
@import "../../css/global.css";
.authorList .infoBoxChild li{
    /* padding: 3px!important; */
    width: 280px!important;
    margin-right: 13px;
    margin-left: 3px;
    height: 226px;

}
.authorList .infoBoxChild li img{
    display:block;
    width: 100%;
}
.authorList .infoItemPrompt i {
    display: inline-block;
    width: 20px;
    height: 18px;
    vertical-align: middle;
}
.authorList .coll{
    background: url(../img/coll.png) no-repeat center;
}
 .authorList .infoItemPrompt button:hover .coll{
    background: url(../img/hoverColl.png) no-repeat center;
}
.authorList .downloadStatus{
    background: url(../img/downloadNum2.png) no-repeat center;
}
.authorList .infoItemPrompt button:hover .downloadStatus{
    background: url(../img/hoverDownload.png) no-repeat center;
}
.authorList .avtiveColl{
    background: url(../img/hoverColl.png) no-repeat center;
}
.authorList .infoItemPrompt button:hover .avtiveColl{
    background: url(../img/hoverColl.png) no-repeat center;
}
.authorList .vipText {
    display: inline-block;
    width: 130px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: bold;
    font-size: 14px;
    color: #fff;
    line-height: 44px;
    padding: 0;
}
.authorList button {
    font-size: 14px;
    line-height: 30px;
    padding: 0;
    /* padding: 0 5px; */
    background: transparent;
    outline: none;
    border: none;
    color: #fff;
    vertical-align: top;
    text-align: right;
    margin-top: 5px;
}
.authorList .collBox {
    width: 55px;
    margin-right: 10px;
}
.authorList .downBox {
    width: 55px;
}
.authorList .infoImg img{
    height: 225px!important;
}
.authorList .infoBoxChild{
    padding-top:5px;
}
</style>

